<template>
	<view :class="mode">
		<view class="top">
			<view style="background:url('/static/image/tabBar/banner.png') no-repeat;background-size:100% 430px;height: 450px;">
				<view class="flex mx-auto items-center py-4 w-full justify-between border-box"
					:class="mode=='pc'?'max-w-1200':'flex-col'">
					<view class="t-left">
						<view class="title font-bold">一站式多云管理平台</view>
						<view class="subTitle">与多家主流公有云进行深度对接，统一简化流程，无需人工 7x24小时，自助开户充值</view>
						<view class="flex mt-8" v-if="mode=='pc'">
							<navigator url="/pages/redeemVoucher/aliyun/aliyun">
								<el-button class="button-primary" type="primary" style="height: 40px;width: 136px;" round>自助充值</el-button>
							</navigator>
							<navigator url="/pages/applyAccount/aliyun/aliyun">
								<el-button style="height: 40px;width: 136px;background: transparent;border-color: #2165FC;color: #2165FC;" 
								class="ml-2" plain round>免费开户</el-button>
							</navigator>
						</view>
						<view class="mt-0 m-auto flex" v-if="mode=='app'" style="width: 90%;">
							<navigator url="/pages/redeemVoucher/aliyun/aliyun">
								<el-button class="button-primary" type="primary" style="height: 40px;width: 136px;" round>自助充值</el-button>
							</navigator>
							<navigator url="/pages/applyAccount/aliyun/aliyun">
								<el-button style="height: 40px;width: 136px;background: transparent;border-color: #2165FC;color: #2165FC;" 
								class="ml-2" plain round>免费开户</el-button>
							</navigator>
						</view>
					</view>
					<view class="t-right" v-if="mode=='pc'"></view>
				</view>
				
				<view class="flex mx-auto w-full grid-cols-4 relative " style="top: -20px;" :class="mode=='pc'?'max-w-1200 gap-8':'flex-wrap mt-4 gap-2'">
					<view class="bg-white p-4 border-box flex rounded-md" :style="{width:mode=='app'?'40%':'flex-1'}">
						<image src="/static/home/bg1.png" style="width: 30px;height: 30px;"></image>
						<view class="flex-1 ml-2">
							<view class="text-lg font-bold">快速充值</view>
							<view class="mt-2 text-black__80 text-xs leading-6">无需绑定信用卡，平台自助授信，无需等待，代充值快速到账，可多种货币支付方式。</view>
						</view>
					</view>
					<view class="bg-white  p-4 border-box flex rounded-md" :style="{width:mode=='app'?'40%':'flex-1'}">
						<image src="/static/home/bg22.png" style="width: 30px;height: 30px;"></image>
						<view class="flex-1 ml-2">
							<view class="text-lg font-bold">快速充值</view>
							<view class="mt-2 text-black__80 text-xs leading-6">无需人工对接，我们提供自助开户服务，快速获取阿里云、腾讯云、AWS等云厂商账号。</view>
						</view>
					</view>
					<view class="bg-white p-4 border-box flex rounded-md" :style="{width:mode=='app'?'40%':'flex-1'}">
						<image src="/static/home/bg3.png" style="width: 30px;height: 26px;"></image>
						<view class="flex-1 ml-2">
							<view class="text-lg font-bold">快速充值</view>
							<view class="mt-2 text-black__80 text-xs leading-6">您可以灵活地设置余额预警，通过多种通知方式实时了解账号余额情况，让您随时掌握账户状况。</view>
						</view>
					</view>
					<view class="bg-white p-4 border-box flex rounded-md" :style="{width:mode=='app'?'40%':'flex-1'}">
						<image src="/static/home/bg4.png" style="width: 30px;height: 26px;"></image>
						<view class="flex-1 ml-2">
							<view class="text-lg font-bold">快速充值</view>
							<view class="mt-2 text-black__80 text-xs leading-6">您可以一键查询多个云账号的充值、授信和消费情况，让您的多云管理更加省心高效！</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="center" style="background-color: #F7F8FB;" :style="{marginTop:mode=='app'?'180px':''}">
			<view class=" mx-auto" :class="mode=='pc'?'max-w-1200 p-8':'p-2'">
				<view class="c-title text-center font-bold">提供全球主流公有云产品服务</view>
				<view class="text-center text-black__80 my-8">与多家主流公有云进行深度对接，提供统一控制台，支持跨云管理，统一门户、统一流程、简化云管理</view>
				<view class="flex flex-wrap justify-between" :class="mode=='pc'?'py-4':'py-2'">
					<view v-for="(item,index) in contentList" :key="index" style="width: 49%;">
						<view class="flex bg-white mt-4 rounded-md" :class="mode=='pc'?'p-8':'flex-col p-2'" :style="{height:mode=='pc'?'250px':''}">
							<view class="flex-1 leading-6">
								<view class="font-bold items-center text-md justify-between" :class="mode=='pc'?'flex':''">
									<view class="flex items-center">
										<view>
											<image :src="item.icon"
												style="width: 26px;height: 26px;margin-right: 5px;margin-top:4px;"></image>
										</view>
										{{item.title}}
									</view>
									<el-link type="primary" :href="item.link">
										<view class="text-xs">前往官网→</view>
									</el-link>
								</view>
								<view class="text-sm text-black__80  my-4">{{item.text}}</view>
								<view v-for="(ii,d) in item.advantage" :key="d"
									class="text-black__80 flex items-center gap-2">
									<view style="width: 18px;height: 18px;background-color: #CCDCFE;" class="rounded-full flex justify-center items-center">
										<uni-icons type="checkmarkempty" size="12" color="#2165FC"></uni-icons>
									</view>
									{{ii.text}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="center">
			<view class="p-8 mx-auto" :class="mode=='pc'?'max-w-1200':''">
				<view class="c-title text-center font-bold">化繁为简，合多为一</view>
				<view class="text-center text-black__80 my-6">统一的操作流程简洁明了、无需繁琐登录，快速了解多云账户状态</view>
				<view class="flex gap-4" style="height: 400px;" :class="mode=='pc'?'':'flex-col'">
					<view class="flex-1" id="image">
						<image :src="btnList2[activeIndex2].image" class="w-full h-full" ></image>
					</view>
					<view class="flex-1 flex leading-6 gap-2" :class="mode=='pc'?'flex-col':'flex-wrap '">
						<view v-for="(item,index) in btnList2" :key="index"
							class="activeBtnhover p-2 cursor-pointer rounded-md mb-2" style="background-color: #F7F8FB;"
							:class="{'activeBtn2':activeIndex2==index,'w-32':mode=='app'}" @click="clickBtn2(index)" >
							<view class="flex items-center title2 text-base relative">
								<template v-if="activeIndex2==index">
									<el-icon color="#fff" size="20"><CaretBottom /></el-icon>
									<view class="absolute" style="transform: rotate(90deg);bottom: -25px;right: -20px;">
										<el-progress :percentage="percentage*10" color="#fff" style="width: 60px;" :show-text="false"/>
									</view>
								</template>
								<template v-else>
									<el-icon color="#9FA4AF" size="20"><CaretRight /></el-icon>
								</template>
								<view class="ml-1">{{item.title}}</view>
								
							</view>
							<view v-if="activeIndex2==index" class="px-7">
								<view v-for="(ii,d) in item.content" class="text-xs" style="color: #ffffff70;">{{ii}}</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		
		<view class="center" style="background: #fff;">
			<view class="p-8 mx-auto" :class="mode=='pc'?'max-w-1200':''">
				<view class="c-title text-center font-bold">选择我们的优势</view>
				<view class="text-center text-black__80 my-6">助力企业多云融合快速出海，打造一站式解决方案</view>
				<view class="flex gap-2 cursor-pointer" :class="mode=='pc'?'':'flex-col'" :style="mode=='pc'?'height: 400px;':'height: 600px;'">
					<block v-for="(item,index) in btnList3" :key="index">
						<view class="animate relative rounded-md" :class="{'w-64':mode=='pc','h-32':mode=='app','activeBtn3':activeIndex3==index}" @mousemove="touchmove(index)" @click="touchmove(index)">
							<image :src="item.image" style="width: 100%;height: 100%;" mode="aspectFill" class="rounded-xl"></image>
							<view v-if="activeIndex3==index" class="absolute top-0  border-box flex flex-col justify-end text-white leading-6" 
							:class="mode=='pc'?'p-8':'px-2 pb-8'" >
								<view class="font-bold text-2xl">{{item.title}}</view>
								<view class="text-md my-6">{{item.content}}</view>
								<!-- <view class="bg-black  rounded-md flex justify-center items-center"
								:class="mode=='pc'?'w-32 h-12':'w-20 text-sm py-1'">
									了解更多
								</view> -->
							</view>
							<view v-else class="absolute left-0 right-0  text-white text-center font-bold text-xl"
							:class="mode=='pc'?'top-8':'top-4'">{{item.title}}</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		
		<view class="center">
			<view class="mx-auto" :class="mode=='pc'?'max-w-1200 p-8':'p-2'">
				<view class="c-title text-center font-bold">为客户全面赋能</view>
				<view class="text-center text-black__80 my-6">满足团队/多云账户协同维护管理，降低维运人工成本</view>
				<view class="flex gap-4 justify-between" :class="mode=='pc'?'':'flex-col'">
					<block v-for="(item,index) in btnList4" :key="index">
						<view class="rounded-xl  p-4 leading-6 text-white relative" :style="{background:item.bg}"  style="height: 300px;width: 300px; box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.2);">
							<view class="text-xl mt-8 text-center">{{item.title}}</view>
							<view class="text-sm my-6 text-center">{{item.subTitle}}</view>
							<view class="text-base font-bold text-center mb-2">平台赋能</view>
							<view class="flex flex-wrap gap-x-4 justify-center m-auto" style="width: 90%;">
								<view v-for="(ii,d) in item.content" :key="index" class="text-xs flex items-center">
									{{ii}}
								</view>
							</view>
							<image :src="item.image" class="absolute left-0 right-0 m-auto" style="width: 80px;height: 80px;top: -30px;"></image>
						</view>
					</block>
					
				</view>
			</view>
		</view>
		
		<view class="center" style="background: #F6F6F6;">
			<view class="mx-auto" :class="mode=='pc'?'max-w-1200 p-8':'p-2'">
				<view class="c-title text-center font-bold">为企业创造云端最大价值</view>
				<view class="text-center text-black__80 my-6">帮助企业实现快速上云、灵活用云和高效管云，提升企业IT能力和业务发展。</view>
				<view class="flex gap-4 cursor-pointer flex-wrap" :class="mode=='pc'?'':'flex-col'">
					<block v-for="(item,index) in btnList5" :key="index">
						<view class="btnList5 flex flex-col justify-between  p-8 rounded-md" :style="mode=='pc'?'width:18.5%;':''">
							<view style="width: 30px;height: 30px;">
								<image :src="item.image" style="width: 100%;height: 100%;"></image>
							</view>
							<view class="font-bold text-sm my-6">{{item.title}}</view>
							<view class="text-sm text-black__50">{{item.text}}</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		
		<view class="center" style="background: url('/static/home/footer.png');">
			<view class="mx-auto" :class="mode=='pc'?'max-w-1200 p-12':'p-2'" >
				<view class="c-title font-bold">专业的国际多云管理服务商</view>
				<view class="text-black__80 my-6">与 源头云 合作，扩展您团队的能力，拓展您的渠道，并成为客户值得信赖的顾问从我们经验丰富的团队获取销售、技术和营销资源来发展您的业务</view>
				<!-- <view class="flex justify-center text-sm gap-2 flex-wrap">
					<view class="flex items-center"><uni-icons type="checkbox-filled" size="16" color="#597EF7"></uni-icons>免费上云咨询服务</view>
					<view class="flex items-center"><uni-icons type="checkbox-filled" size="16" color="#597EF7"></uni-icons>制定云端解决方案</view>
					<view class="flex items-center"><uni-icons type="checkbox-filled" size="16" color="#597EF7"></uni-icons>售后服务质量保证</view>
				</view> -->
				<view class="flex mt-8">
					<navigator url="/pages/redeemVoucher/aliyun/aliyun">
						<el-button type="primary" style="height: 40px;width: 136px;background: linear-gradient(90deg, #2193FC 0%, #2165FC 50%);" round>上云咨询</el-button>
					</navigator>
					<navigator url="/pages/applyAccount/aliyun/aliyun">
						<el-button style="height: 40px;width: 136px;background: transparent;border-color: #2165FC;color: #2165FC;" class="ml-2" plain round>免费开户</el-button>
					</navigator>
				</view>
			</view>
		</view>
		
		<footerPage></footerPage>
		<tabBar v-if="mode=='app'"></tabBar>
		<appMeum v-if="mode=='app'"></appMeum>
	</view>
</template>

<script>
	let timer
	
	import {CaretRight,CaretBottom} from '@element-plus/icons-vue'
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		components:{
			CaretRight,
			CaretBottom,
		},
		data() {
			return {
				activeIndex: 0,
				btnList: [{
						icon: '/static/home/aliyun_icon.png',
						text: '阿里云国际'
					},
					{
						icon: '/static/home/tencent_icon.png',
						text: '腾讯云国际'
					},
					{
						icon: '/static/home/aws_icon.png',
						text: 'AWS国际'
					},
					{
						icon: '/static/home/gcp_icon.png',
						text: '谷歌云国际'
					}
				],
				contentList: [{
						icon: '/static/home/aliyun_icon.png',
						title: 'Alibaba Cloud 阿里云国际',
						text: '阿里云为全球30个地域、89个可用区的客户提供稳定性全球领先的产品技术。弹性计算单实例可用性SLA高达99.975%，数据存储设计可靠性高达12个9，提供稳如磐石的客户体验。阿里云国际覆盖了全球主要地区，拥有多个数据中心，包括但不限于亚太、欧洲和美洲。',
						advantage: [{
							text: '全球38个地域开放67个'
						}, {
							text: '全球38个地域'
						}, {
							text: '全球38个地域'
						}],
						link: 'https://www.alibabacloud.com/zh?_p_lc=1',
						image: '/static/home/alibg.png'
					},
					{
						icon: '/static/home/tencent_icon.png',
						title: 'Tencent Cloud 腾讯云国际',
						text: '腾讯云的基础设施覆盖全球五大洲 26 个地区，运营 70 个可用区。提供全球领先的云计算、大数据、人工智能等技术产品与服务，以卓越的科技能力打造丰富的行业解决方案，构建开放共赢的云端生态，推动产业互联网建设，助力各行各业实现数字化升级。',
						advantage: [{
							text: '全球56个地域开放80个'
						}, {
							text: '全球56个地域'
						}, {
							text: '全球56个地域'
						}],
						link: 'https://www.tencentcloud.com/zh',
						image: '/static/home/cloud_tencent_1.png'
					},
					{
						icon: '/static/home/gcp_icon.png',
						title: 'Google Cloud Platform 谷歌云',
						text: 'GCP 拥有覆盖范围领先的全球云基础设施。唯有 Google Cloud 汇集了整个 Google 的创新成果，将可满足未来需求的 AI 技术、可加速创新的数据洞见、专为满足行业需求而设计的基础架构，以及有助团队出色完成工作的协作工具和可主动防范威胁的安全机制融为一体，从而帮助客户完成数字化转型。',
						advantage: [{
							text: '全球37个地域开放30个'
						}, {
							text: '全球37个地域'
						}, {
							text: '全球37个地域'
						}],
						link: 'https://cloud.google.com',
						image: '/static/home/cloud_gcp_1.png'
					},
					{
						icon: '/static/home/aws_icon.png',
						title: 'Amazon Web Services 亚马逊',
						text: 'AWS 拥有覆盖范围领先的全球云基础设施。亚马逊云科技-连续12年被Gartner评为“全球云计算领导者”。为全球客户提供以云服务器、云存储、数据库、机器学习为主的基础设施和云解决方案,助您发展出海业务和企业在本地上云。',
						advantage: [{
							text: '全球46个地域开放63个'
						}, {
							text: '全球46个地域'
						}, {
							text: '全球46个地域'
						}],
						link: 'https://aws.amazon.com/cn/',
						image: '/static/home/cloud_aws_1.png'
					},
					
				],
				activeIndex2: 0,
				btnList2: [{
						icon: 'image',
						title: '快速开户',
						content: ['1.创建帐户-只支持腾讯云', '2.邀请注册-只支持阿里云', '3.申请帐户-支持阿里云腾讯云aws'],
						image:'/static/home/hujiaozhonx.png'
					},
					{
						icon: 'vip',
						title: '自助充值',
						content: ['1.支持通用站点充值', '2.客服接待手动充值'],
						image:'/static/home/hujiaozhonx2.png'
					},
					{
						icon: 'loop',
						title: '余额回收',
						content: ['创建申请多云帐户如出现（异常/封号/密码丢失）可以一键回收指定帐户余额'],
						image:'/static/home/hujiaozhonx3.png'
					},
					{
						icon: 'notification',
						title: '动态预警',
						content: ['当您的帐户余额不足，帐户欠费，业务遇到突增消耗，我们将通过「telegram Bot」通知您'],
						image:'/static/home/hujiaozhonx4.png'
					},
					{
						icon: 'cloud-download',
						title: '动态预警',
						content: ['我们多云管理平台将以分钟计算统计您名下所有帐户的状态，比如【当前余额】【累积消费】并提供telegram快捷查询服务'],
						image:'/static/home/hujiaozhonx5.png'
					},
					{
						icon: 'info',
						title: '预算控制',
						content: ['1.支持自定义【帐户冻结】当帐户余额低于 XX 时触发冻结','2.当余额低于0时，触发冻结'],
						image:'/static/home/hujiaozhonx6.png'
					},
				],
				activeIndex3: 0,
				btnList3: [{
						title: '多云纳管',
						content: '一个平台管理多家国际云资源，用户无需登录到各个云服务商的控制台，即可快速完成注册、充值、管理。',
						image:'/static/home/gg1.png'
					},
					{
						title: '余额管理',
						content: '一个平台管理多家国际云资源，用户无需登录到各个云服务商的控制台，即可快速完成注册、充值、管理。',
						image:'/static/home/gg2.png'
					},
					{
						title: '统一账单',
						content: '一个平台管理多家国际云资源，用户无需登录到各个云服务商的控制台，即可快速完成注册、充值、管理。',
						image:'/static/home/gg3.png'
					},
					{
						title: '资源管理',
						content: '一个平台管理多家国际云资源，用户无需登录到各个云服务商的控制台，即可快速完成注册、充值、管理。',
						image:'/static/home/gg4.png'
					},
					{
						title: '智能规划',
						content: '一个平台管理多家国际云资源，用户无需登录到各个云服务商的控制台，即可快速完成注册、充值、管理。',
						image:'/static/home/gg5.png'
					},
				],
				btnList4: [{
						title: '成为客户',
						subTitle: '无需注册登录，就可在平台自助申请账号与充值账户，首次充值申请账号享受专属优惠。',
						content:['便携充值','自助开户','预警通知'],
						image:'/static/home/bb1.png',
						bg:'linear-gradient(135deg, #37B2FD 4%, #028EE2 94%)'
					},
					{
						title: '注册会员',
						subTitle: '统一管理多个云账号，实时掌握账户余额，满足团队协同维护管理多云账户，降低维运人工成本。',
						content:['多云账单查询','多云账户管理','授信自由划转','财务流水管理','预警通知Pro','技术服务支持'],
						image:'/static/home/bb2.png',
						bg:'linear-gradient(135deg, #633DB0 4%, #262363 94%)'
					},
					{
						title: '代理合作',
						subTitle: '为您提供多云管理平台，您可以自定义充值站点，扩展客户群体，实现稳定的收益增长。',
						content:['多云管理代理后台','独立telegram Bot服务助手','专属域名运营站点','专属商务技术服务团队','分配大客户接待专员','全网首家实时返佣-前置佣金政策'],
						image:'/static/home/bb3.png',
						bg:'linear-gradient(135deg, #3961FB 4%, #0632B8 94%)'
					},
				],
				btnList5:[{
					image:'/static/home/jz_1.png',
					title:'云托管服务',
					text:'帮助企业客户管理云基础设施，降低运营成本及风险。'
				},
				{
					image:'/static/home/jz_2.png',
					title:'云迁移服务',
					text:'为企业进行云迁移需求评估，并完成迁移部署。'
				},
				{
					image:'/static/home/jz_3.png',
					title:'云账单服务',
					text:'提供透明的账单及咨询，清晰掌握企业云资源使用情况。'
				},
				{
					image:'/static/home/jz_4.png',
					title:'云架构建议',
					text:'为企业提供最适合的云端架构建议，从底层加强管理。'
				},
				{
					image:'/static/home/jz_5.png',
					title:'云成本优化',
					text:'提供云成本优化建议，企业运营更长久。'
				},
				{
					image:'/static/home/jz_6.png',
					title:'云安全规划',
					text:'提供DDos防护和网络防护方案，确保业务安全。'
				},
				{
					image:'/static/home/jz_7.png',
					title:'提高管理效率',
					text:'集中管理多个国际云服务提供商资源提高管理效率。'
				},
				{
					image:'/static/home/jz_8.png',
					title:'增强灵活性',
					text:'通过资源调配、余额转移等功能，增强云资源的灵活性。'
				},
				],
				
				percentage:0,
			}
		},
		computed: {
			...mapState({
				mode:state=>state.app.mode
			})
		},
		mounted() {
			this.setInterval()
		},
		methods: {
			setInterval() {
				clearInterval(timer)
				timer = setInterval(()=>{
					this.percentage++
					if(this.percentage>10){
						this.percentage=0
						this.activeIndex2++
						if(this.activeIndex2>5){
							this.activeIndex2=0
						}
					}
				},1000)
			},
			// 点击按钮
			clickBtn(index) {
				console.log(index);
				this.activeIndex = index
			},
			// 点击按钮
			clickBtn2(index) {
				console.log(index);
				this.activeIndex2 = index
			},
			// 鼠标移动
			touchmove(index){
				console.log(index);
				this.activeIndex3 = index
			}
			
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .el-progress-bar__outer{
		background-color: #ebeef550!important;
	}
	.primary:hover{
		
	}
	.activeBtnhover:hover{
		background: #C7D5F0!important;
	}
	.pc {
		.top {
			width: 100%;
			background-color: #F7F8FB;
		}

		.title {
			font-size: 40px;
			line-height: 67px;
		}

		.subTitle {
			font-size: 14px;color: #636974;width: 300px;
		}

		.t-right {
			width: 528px;
			height: 300px;
		}

		.c-title {
			font-size: 32px;
		}

		.activeBtn {
			color: #597EF7;
			border: 1px solid #597EF7;
		}
		.activeBtn2{
			background-color: #2065FC!important;
			box-shadow: 0 1px 10px 2px rgba(0, 0, 0, 0.2);
			height: 100px;color: #fff;
			.title2{
				color: #fff;font-weight: bold;
			}
		}
		.animate{
			transition: width 1s;
		}
		.activeBtn3{
			width: 100%;
		}
		.btnList5{
			background: linear-gradient( 180deg, #F5F8FF 0%, #FFFFFF 100%);
			box-shadow: 0 1px 10px 1px rgba(0, 0, 0, 0.1);
		}
	}

	.app {
		padding-bottom: 120rpx;
		.top {
			background: #F7F8FB;
		}

		.title {
			font-size: 28px;
			text-align: center;
			margin: 20rpx;
		}

		.subTitle {
			max-width: 90%;
			margin: 80rpx auto;
			color: #999999;
			font-size: 14px;
			text-align: center;
		}

		.t-right {
			width: 500rpx;
			margin: auto;
			height: 400rpx;
		}

		.activeBtn {
			color: #597EF7;
			border: 1px solid #597EF7;
		}
		.activeBtn2{
			background-color: #fff;
			box-shadow: 0 1px 10px 2px rgba(0, 0, 0, 0.2);
			.title2{
				color: #597EF7;font-weight: bold;
			}
		}
		.animate{
			transition: height 0.5s;
		}
		.activeBtn3{
			height:100%;
		}
		.btnList5{
			background: linear-gradient( 180deg, #F5F8FF 0%, #FFFFFF 100%);
			box-shadow: 0 1px 10px 1px rgba(0, 0, 0, 0.1);
		}
	}
</style>